<template>
  <div>
      <a-col :span="24">
      <a-empty v-show="empty" class="empty" />
      <div id="basicEcharts"></div>
      </a-col>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    histogram: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      money: [],
      count: [],
      data: [],
      empty: false,
      day: [
        "1号",
        "2号",
        "3号",
        "4号",
        "5号",
        "6号",
        "7号",
        "8号",
        "9号",
        "10号",
        "11号",
        "12号",
        "13号",
        "14号",
        "15号",
        "16号",
        "17号",
        "18号",
        "19号",
        "20号",
        "21号",
        "22号",
        "23号",
        "24号",
        "25号",
        "26号",
        "27号",
        "28号",
        "29号",
        "30号",
        "31号",
      ],
    };
  },
  watch: {
    histogram(res) {
      let tempMoney = [];
      let tempCount = [];
      this.data = res;

      if (this.data.length > 0) {
        this.empty = false;
        this.data.forEach((item) => {
          item.day = item.day + "号";
          this.day.forEach((ele) => {
            if (ele == item.day) {
              tempMoney.push([item.day, item.money]);
              tempCount.push([item.day, item.count]);
            }
            this.money = tempMoney;
            this.count = tempCount;
          });
          this.drawChart();
        });
      } else {
        this.data = [{ count: 0, money: 0, day: "0号" }];
        this.data.forEach((item) => {
          item.day = item.day + "号";
          this.day.forEach((ele) => {
            if (ele == item.day) {
              tempMoney.push([item.day, item.money]);
              tempCount.push([item.day, item.count]);
            }
            this.money = tempMoney;
            this.count = tempCount;
          });
          this.drawChart();
        });
        this.empty = true;
      }
    },
  },
  methods: {
    drawChart() {
      let myChart = this.$echarts.init(document.getElementById("basicEcharts"));
      var option;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {},
        legend: {
          data: ["订单总数", "总金额"],
        },
        xAxis: [
          {
            type: "category",
            data: this.day,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "总金额：元",
            min: 0,
            interval: 200,
            // axisLabel: {
            //   formatter: "{value} 元",
            // },
            axisLine: {
              show: true,
            },
          },
          {
            type: "value",
            name: "订单总数：笔",
            min: 0,
            interval: 10,
            // axisLabel: {
            //   formatter: "{value} 笔",
            // },
            // axisLine: {
            //   show: this.showCount,
            // },
          },
        ],
        tooltip: {
          show: true, // 是否显示
          trigger: "axis", // 触发类型  'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
          axisPointer: {
            // 坐标轴指示器配置项。
            type: "shadow", // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            axis: "auto", // 指示器的坐标轴。
            snap: true, // 坐标轴指示器是否自动吸附到点上
          },
          renderMode: "html", // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
          backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。
          borderColor: "#333", // 提示框浮层的边框颜色。
          borderWidth: 0, // 提示框浮层的边框宽。
          padding: 5, // 提示框浮层内边距，
          textStyle: {
            // 提示框浮层的文本样式。
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "normal",
            fontFamily: "sans-serif",
            fontSize: 14,
          },
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);", // 额外附加到浮层的 css 样式
          confine: false, // 是否将 tooltip 框限制在图表的区域内。
        },
        series: [
          {
            name: "总金额",
            type: "bar",
            data: this.money,
          },
          {
            name: "订单总数",
            type: "line",
            yAxisIndex: 1,
            data: this.count,
          },
        ],
      };
      option && myChart.setOption(option);
      window.addEventListener("resize",function(){
		    myChart.resize();
		});
    },
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.drawChart();
    setTimeout(() => {}, 500);
  },
};
</script>

<style lang="less" scoped>
#basicEcharts {
  // display: inline-block;
  width: 80%;
  height: 50vh;
  margin-top: 30px;
}
.empty {
  position: absolute;
  top: 30%;
  left: 0;
  width: 85%;
  height: 50%;
}
</style>
